<template>
  <div class="banner">
    <el-carousel trigger="click" height="473px"  indicator-position="outside">
      <el-carousel-item v-for="banner in banner_list" :key="banner.id">
        <a :href="banner.link">
          <el-image :src="banner.image_url" alt=""></el-image>
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
  
<script>
  import api from '../../api.js'
  
  export default {
    name: 'Banner',
    data () {
      return {
        banner_list: []
      }
    },
    mounted () {
      this.getBannerList()
    },
    methods: {
      getBannerList () {
        api['getBanners']().then((res) => {
          let banners = res.data.data
          for (var i = 0; i < banners.length; i++) {
            if (banners[i].able === true) {
              this.banner_list.push(banners[i])
            }
          }
        }).catch()
      }
    }
  }
</script>

<style lang="less" scoped>

  .el-carousel__arrow{
    width: 100px!important;
    height: 100px!important;
  }
  .el-icon-arrow-left{
    font-size: 35px;
    margin-left: 50px;
  }
  .el-carousel__arrow--left{
    left: -50px;
  }
</style>